<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>4_元素溢出</title>
        <style>
            div {
                background-color: blue;
                /*注意:想要溢出必须先预设div的大小,否者会被内容撑起来,不会溢出!*/
                width: 700px;
                height: 1000px;
                /*overflow: visible;!*溢出可见,默认值*!*/
                /*overflow: hidden;!*溢出隐藏.多余的部分直接裁掉*!*/
                /*overflow: scroll;!*显示两个方向的拖拽条,不论是否溢出*!*/
                overflow: auto; /*哪个方向溢出才显示拖拽条,否则不显示*/
            }
            img{
                width: 300px;
                /*垂直方向的元素对齐方式,向图片的XX线对齐*/
                vertical-align: baseline;/*基线对齐 默认值*/
                /*vertical-align: bottom;!*底线对齐*!*/
                /*vertical-align: top;!*顶线对齐*!*/
                /*vertical-align: middle;!*中线对齐*!*/
            }
        </style>
    </head>
    <body>
        abyj <img src="../day01/1.png">国圈 <img src="../day01/1.png">
        <div>
            <img src="../day01/1.png">
            <img src="../day01/1.png">
            <img src="../day01/1.png">
            <img src="../day01/1.png">
        </div>
    </body>
</html>